import React from 'react';
import { useHistory } from '../contexts/HistoryContext';
import { HistoryItem } from '../types/history';

interface HistoryListProps {
  onRestoreHistory: (item: HistoryItem) => void;
}

const HistoryList: React.FC<HistoryListProps> = ({ onRestoreHistory }) => {
  const { history, deleteHistory, clearHistory } = useHistory();

  const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <div className='w-full'>
      {history.length > 0 && (
        <>
          <div className='flex justify-between items-center mb-4'>
            <h1 className='text-blue-500 text-2xl font-bold'>历史记录</h1>
            <button
              className='p-2 text-red-500 hover:text-red-600 hover:bg-gray-100 rounded-full transition-colors'
              onClick={clearHistory}
              title='清空历史记录'
            >
              <svg
                xmlns='http://www.w3.org/2000/svg'
                className='h-6 w-6'
                fill='none'
                viewBox='0 0 24 24'
                stroke='currentColor'
              >
                <path
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth={2}
                  d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'
                />
              </svg>
            </button>
          </div>
          <div className='grid grid-cols-5 gap-4 max-h-[400px] overflow-y-auto'>
            {history.map((item: HistoryItem) => (
              <div
                key={item.id}
                className='bg-gray-50 p-4 rounded-lg hover:shadow-md transition-shadow cursor-pointer relative group'
                onClick={() => onRestoreHistory(item)}
              >
                <button
                  className='absolute top-2 right-2 p-1.5 text-gray-400 hover:text-red-500 hover:bg-white rounded-full transition-colors'
                  onClick={e => {
                    e.stopPropagation();
                    deleteHistory(item.id);
                  }}
                  title='删除'
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    className='h-4 w-4'
                    fill='none'
                    viewBox='0 0 24 24'
                    stroke='currentColor'
                  >
                    <path
                      strokeLinecap='round'
                      strokeLinejoin='round'
                      strokeWidth={2}
                      d='M6 18L18 6M6 6l12 12'
                    />
                  </svg>
                </button>
                <div className='text-gray-500 text-sm mb-2'>{formatDate(item.timestamp)}</div>
                {item.data.remarks && <div className='text-gray-600 text-sm line-clamp-1 mb-1'>{item.data.remarks}</div>}
                <div className='text-gray-700 line-clamp-2 mb-1'>{item.data.apiAddress}</div>
                <div className='text-gray-600 text-sm line-clamp-2'>{item.data.errorMessage}</div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default HistoryList;
